<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            width: 400px;
            height: 30px;
            outline: none;
            border: 1px solid #333;
        }

        ul li {
            list-style: none;
        }

        ul li {
            display: none;
            border: 1px solid #333;
            border-top: none;
            border-bottom: none;
            width: 398px;
            position: relative;
            z-index: 9;
        }

        ul li a {
            color: #111;
            text-decoration: none;
            display: block;
            width: 100%;
        }

        ul li:nth-child(4) {
            border-bottom: 1px solid #333;
        }

        ul li:hover a {
            color: blue;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="search" name="user" class="user" id="" autocomplete="off"> <button>点我啊</button>
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>

    </div>
    <script src="./public.js"></script>
    <script>
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218,1425,31672,32139,31254,32045,32230,32299,31639&wd=123&req=2&csor=5&pwd=hell&cb=jQuery110209460874033153552_1594630926712&_=1594630926722
        let user = document.querySelector(".user");
        let li = document.querySelectorAll("li");
        let a = document.querySelectorAll("a");
        user.oninput = () => {
            let nei = user.value;

            if (nei != "") {
                ajax({
                    method: "jsonp",
                    url: "https://www.baidu.com/sugrec",
                    data: {
                        pre: 1,
                        p: 3,
                        ie: "utf-8",
                        json: 1,
                        prod: "pc",
                        from: "pc_web",
                        sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
                        wd: nei,
                        req: 2,
                        csor: 5,
                        cb: "callback",
                        _: Date.now()
                    },
                    jsonpcallback: "callback",
                    callback: function (data) {
                        // console.log(data);

                        if (typeof (data.g) == "object") {
                            user.style.borderBottom = "none"
                            li.forEach((item, index) => {
                                item.style.display = "block"
                                item.innerHTML = `<a href="#">${data.g[index].q}</a>`
                            })
                        }

                    }
                })
            } else {
                li.forEach((item) => {
                    item.style.display = "none"
                    item.innerHTML = ""
                })
            }

        }


        // ajax({
        //     method: "jsonp",
        //     url: "https://www.baidu.com/sugrec",
        //     data: {
        //         pre: 1,
        //         p: 3,
        //         ie: "utf-8",
        //         json: 1,
        //         prod: "pc",
        //         from: "pc_web",
        //         sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
        //         wd: "hello world",
        //         req: 2,
        //         csor: 5,
        //         cb: "callback",
        //         _: Date.now()
        //     },
        //     jsonpcallback: "callback",
        //     callback: function (data) {
        //         console.log(data);
        //     }
        // })

    </script>
</body>

</html>